<template>
	<view class="container" v-if="dataObj">
		<view class="header">
			<view class="flexWrap" v-if="dataObj.carFindBOneselfDetailsBoffPublicSon">
				<view class="width-40">
					<i-icon v-if="dataObj.carFindBOneselfDetailsBoffPublicSon.state === 0" icon="icondingdandengdai" type="single" class="mr-10 middle" size="34rpx" color="#333"></i-icon>
					<i-icon
						v-else-if="dataObj.carFindBOneselfDetailsBoffPublicSon.state === 1"
						icon="icondindanwancheng"
						type="single"
						class="mr-10 middle"
						size="34rpx"
						color="#333"
					></i-icon>
					<i-icon v-else icon="iconfabu-cha" type="single" class="mr-10 middle" size="34rpx" color="#333"></i-icon>
					{{ offerCountList[dataObj.carFindBOneselfDetailsBoffPublicSon.state] }}
				</view>
				<view class="width-60 u-text-right font-24" v-if="dataObj.carFindBOneselfDetailsBoffPublicSon.state === 0 || dataObj.carFindBOneselfDetailsBoffPublicSon.state === 1">
					<i-icon icon="iconchakan" type="single" class="mr-10 middle" size="34rpx" :color="dataObj.view ? '#333' : '#fff'"></i-icon>
					<text :class="dataObj.view ? 'color-333' : 'color-fff'">买方已查看</text>
				</view>
			</view>
		</view>
		<view class="mids boxS mart40f">
			<view class="mid-item color-333 font-28 flex">
				<view class="width-80  font-bold" @click="goStore">
					<i-icon icon="icondianpu" class="mr-10 middle" type="single" size="44rpx" color="#fbd220"></i-icon>
					<text class="font-30" >{{ dataObj.store_Name }}</text>
					<i-icon icon="iconbao_1"  class="ml-5 middle" type="single" size="34rpx" color="#fbd220"></i-icon>
				</view>
				<view class="width-20 u-text-right"><i-icon icon="iconfanhui" class="rotate180 middle" type="single" size="32rpx" color="#333"></i-icon></view>
			</view>
			<view class="mt-20 font-28">求购车型信息</view>
			<view class="mid-item">
				<view class="mid-left">车型：</view>
				<view class="mid-right">{{ dataObj.specificationName }}{{ dataObj.branb_name }}{{ dataObj.car_type_name }} {{ dataObj.car_name }}</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">指导价：</view>
				<view class="mid-right text-line">{{ dataObj.price }}</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">发布日期：</view>
				<view class="mid-right text-line">{{ returnTime(dataObj.addTime) }}</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">有效期：</view>
				<view class="mid-right text-line">
					<u-count-down :timestamp="dataObj.betweenTime" separator="zh" :show-days="true" font-size="26" separator-size="26" color="#000"></u-count-down>
				</view>
			</view>
			<view class="flex pad-t-b-10 mid-item">
				<view class="mid-left font-24">外观内饰：</view>
				<view class="mid-right text-line font-24 ">
					<view class="" v-for="(color, ind) in dataObj.facade_pictureList" :key="ind">
						<view class="flex-jc-sb width-100 color-333" v-if="color.outerColour && color.inColour">
							<view :style="{ background: color.outerColour.colorCoding }" class="iconcolor"></view>
							{{ color.outerColour.color }} /{{ color.inColour.color }}
							<view v-if="color.inColour.neiColor.length === 1" :style="{ background: color.inColour.colorCoding }" class="iconcolor"></view>
							<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in color.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
						</view>
					</view>
				</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">上牌地点</view>
				<view class="mid-right text-line">{{ dataObj.goods_region_name }}</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">区域要求</view>
				<view class="mid-right text-line">{{ dataObj.region_limit_name }}</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">手续</view>
				<view class="mid-right text-line">{{ dataObj.procedurName }}</view>
			</view>
			<view class="mid-item  ">
				<view class="mid-left">车辆详情</view>
				<view class="mid-right text-line">{{ dataObj.car_descriptionName }}</view>
			</view>
			<view class="mid-item border-bottom0 heightAuto">
				<view class="mid-left">备注</view>
				<view class="mid-right remakr">{{ dataObj.remark }}</view>
			</view>
		</view>
		<view class="mids boxS " v-if="dataObj.carFindBOneselfDetailsBoffPublicSon">
			<view class="mid-item color-333 font-28">我的报价</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">定金：</view>
				<view class="mid-right text-line">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.deposit }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">报价：</view>
				<view class="mid-right text-line">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.quoted_Price }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">优惠：</view>
				<view class="mid-right text-line">{{ returnDifference(dataObj.carFindBOneselfDetailsBoffPublicSon.difference) }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">销售区域：</view>
				<view class="mid-right text-line">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.sale_Region_Name }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">报价时间：</view>
				<view class="mid-right text-line">{{ returnTime(dataObj.carFindBOneselfDetailsBoffPublicSon.addTime) }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">截止日期：</view>
				<view class="mid-right text-line">
					<u-count-down
						:timestamp="dataObj.carFindBOneselfDetailsBoffPublicSon.betweenTime"
						separator="zh"
						:show-days="true"
						font-size="26"
						separator-size="26"
						color="#000"
					></u-count-down>
				</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">手续：</view>
				<view class="mid-right text-line">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.service_Chargename }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">车辆详情：</view>
				<view class="mid-right text-line">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.car_Detailsname }}</view>
			</view>
			<view class="mid-item border-bottom0 height80">
				<view class="mid-left">报价人：</view>
				<view class="mid-right text-line">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.uname }}{{ dataObj.carFindBOneselfDetailsBoffPublicSon.phone }}</view>
			</view>
			<view class="mid-item border-bottom0 heightAuto">
				<view class="mid-left">备注：</view>
				<view class="mid-right  remakr">{{ dataObj.carFindBOneselfDetailsBoffPublicSon.remark }}</view>
			</view>
		</view>
		<view class="boxS mt-20 flex">
			<view class="width-50 pad-t-b-20 color-333 font-28 border-bottom0">
				<text class="color-EB5B01">{{dataObj.views}}次</text>
				浏览/
				<text class="color-EB5B01">{{dataObj.findBoffList.length}}人</text>
				参与报价
			</view>
			<view class="width-50 flex u-text-right flex-jc-fe" @click="goDetail">
				<view class="bjImg" v-if="index < 4" v-for="(item, index) in dataObj.findBoffList" :key="index"><image :src="item.store_Topimg" mode=""></image></view>
				<view class="mt24"><i-icon icon="iconfanhui" class="rotate180 middle ml-5" type="single" size="28rpx" color="#333"></i-icon></view>
			</view>
		</view>
		<view class="mids">继续报价</view>
		<view class="looking-car">
			<view class="li" v-for="(it, index) in dataList" :key="index" @click="Findcardetails(it, '1')">
				<view class="main">
					<view class="good-img"><image :src="it.goodimg" mode="aspectFill"></image></view>
					<view class="info">
						<view class="title">
							<view class="icon">寻</view>
							<view class="icon-main">{{ it.car_Type_Name }}{{ it.car_name }}</view>
						</view>
						<view class="line">
							<text class="name">类型：</text>
							<text class="con">{{ it.specification }}</text>
						</view>
						<view class="line flex">
							<text class="name">外观/内饰：</text>
							<view class="con width-70" v-for="(color, ind) in it.facade_Picture" :key="ind">
								<view class="flex-jc-sb width-100 color-333" v-if="color.outerColour && color.inColour">
									<view :style="{ background: color.outerColour.colorCoding }" class="iconcolor"></view>
									{{ color.outerColour.color }} /{{ color.inColour.color }}
									<view v-if="color.inColour.neiColor.length == 1" :style="{ background: color.inColour.colorCoding }" class="iconcolor"></view>
									<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in color.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
								</view>
							</view>
						</view>
						<view class="line">
							<text class="name">上牌地：</text>
							<text class="con">{{ it.goods_Region_Name }}</text>
						</view>
						<view class="line">
							<text class="name">发布日期：</text>
							<text class="con">{{ it.addTime.split('T')[0] }} {{ it.addTime.split('T')[1] }}</text>
						</view>
						<view class="line">
							<text class="name">有效期至：</text>
							<text class="con">{{ it.deadline.split('T')[0] }}</text>
						</view>
						<view class="line">
							<text class="orange import">{{ it.remark }}</text>
						</view>
					</view>
				</view>
				<view class="bar">
					<view class="left">
						<view class="store-name">
							<text class="orange">{{ it.views }}</text>
							次浏览/已有
							<text class="orange">{{ it.offerAmount }}</text>
							家车商报价
						</view>
						<view class="bar-bottom flex">
							<text class="name">剩余报价时间：</text>
							<view class="con"><u-count-down separator-size="26" font-size="26" :timestamp="it.countdown" separator="zh"></u-count-down></view>
						</view>
					</view>

					<view class="right">
						<view class="btn" @click.stop="Findcardetails(it, '2', 1)">我要报价</view>
						<view class="tips">报价后可联系买方</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="dataObj.carFindBOneselfDetailsBoffPublicSon">
			<!--已报价-->
			<view class="fixedBottomBtn" v-if="dataObj.carFindBOneselfDetailsBoffPublicSon.state === 0">
				<view class="btn">
					<view class="btnWrap-3">
						<view class="left wid174" @click="Findcardetails('', '2', 2)">
							<i-icon icon="iconqiyebianji" type="single" class="middle" size="34rpx" color="#ffe03b"></i-icon>
							<view class="">编辑报价</view>
						</view>
						<view class="middle-wrap wid174" @click="contactSeller">
							<i-icon icon="iconxiaoxi" type="single" class="middle" size="34rpx" color="#ffe03b"></i-icon>
							<view class="">联系买方</view>
						</view>
						<view class="right wid350" @click="phoneClick">
							<i-icon icon="iconlianxi" type="single" class="mr-5 middle" size="34rpx" color="#333"></i-icon>
							电话买方
						</view>
					</view>
				</view>
			</view>
			<!--已过期 -->
			<view class="fixedBottomBtn" v-else-if="dataObj.carFindBOneselfDetailsBoffPublicSon.state === 2">
				<view class="btn">
					<view class="btnWrap width-100">
						<view class="left width-50" @click="contactSeller">
							<i-icon icon="iconxiaoxi" type="single" class="mr-10 middle" size="34rpx" color="#ffe03b"></i-icon>
							联系买方
						</view>
						<view class="right width-50" @click="phoneClick">
							<i-icon icon="iconlianxi" type="single" class="mr-10 middle" size="34rpx" color="#333"></i-icon>
							致电买方
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--已取消 -->
		<!-- <view class="fixedBottomBtn" v-else-if="state === 3" @click="findthecarStatus = true"><view class="btn cancel onshelf">上架</view></view> -->
	</view>
</template>

<script src="./detailsOfMyOffer.js"></script>
<style lang="scss" scoped>
@import './detailsOfMyOffer.scss';
@import '../style/common.scss';
</style>
